import Bus from "@/utils/bus";
import { ref } from "vue";
import type { Ref } from 'vue'
import { getUuid } from "wft-utils";

export function useContextMenu(panelJson: Ref<TPanel>) {
  const contextConfig = ref<{
    top: number | string,
    left: number | string,
    right: number | string,
    bottom: number | string
  }>({
    top: 0,
    left: 0,
    right: 'none',
    bottom: 'none'
  })
  const showPanelContext = ref(false)
  const curCopyComp = ref<TComp | null>()
  const showCompContext = ref(false)
  const activeComp = ref<TComp>()

  // 粘贴
  function paste (event: MouseEvent) {
    if (!curCopyComp.value) return
    const pushComp = JSON.parse(JSON.stringify(curCopyComp.value)) as TComp
    const mobileContainerPanel = document.querySelector('#wft-mobile-container-panel')!
    const { left, top, width, height } = mobileContainerPanel.getBoundingClientRect()
    pushComp.style.grid.left = pushComp.style.percent.width == '100%' ? 0 : event.clientX - left
    pushComp.style.grid.top = event.clientY - top
    pushComp.style.percent.left = ((pushComp.style.grid.left / width) * 100).toFixed(0) + '%'
    pushComp.style.percent.top = ((pushComp.style.grid.top / height) * 100).toFixed(0) + '%'
    if (pushComp.style.percent.width == '100%') {
      pushComp.style.grid.width = parseInt(width + '')
    }
    pushComp.id = getUuid()
    pushComp.parentId = null
    pushComp.parentKey = null
    if (pushComp.type == 'advanced') {
      pushComp.children!.forEach(child => {
        child.id = getUuid()
        child.parentId = pushComp.id
        child.parentKey = pushComp.key
      })
    }
    if(pushComp.style.coors) delete pushComp.style.coors
    panelJson.value.children.push(pushComp)
    curCopyComp.value = JSON.parse(JSON.stringify(pushComp))
    Bus.emit('addStack')
  }

  // 清空画板
  function clear () {
    panelJson.value.children = []
    Bus.emit('addStack')
  }

  // 清空剪切板
  function clearClipboard () {
    curCopyComp.value = null
  }

  // 点击面板隐藏右键弹窗
  function panelClick () {
    Bus.emit('hideAdvancedContainerPanelContext')
    Bus.emit('hideAdvancedFormPanelContext')
    showCompContext.value = false
    showPanelContext.value = false
  }

  // 面板右键
  function panelContextMenu (event: MouseEvent) {
    Bus.emit('hideAdvancedContainerPanelContext')
    Bus.emit('hideAdvancedFormPanelContext')
    showCompContext.value = false
    showPanelContext.value = false
    if (panelJson.value.isGlobal) return
    initContextPosition(event)
    showPanelContext.value = true
  }

  // 组件右键
  function compContextHandler (event: MouseEvent, curComp: TComp) {
    Bus.emit('hideAdvancedContainerPanelContext')
    Bus.emit('hideAdvancedFormPanelContext')
    showCompContext.value = false
    showPanelContext.value = false
    if (panelJson.value.isGlobal) return
    activeComp.value = curComp
    initContextPosition(event)
    showCompContext.value = true
  }

  function initContextPosition (event: MouseEvent) {
    const { left, top, height, width } = document.getElementById('wft-mobile-container')!.getBoundingClientRect()
    if (event.clientY - top > (height / 2)) {
      contextConfig.value.bottom = height - (event.clientY - top)
      contextConfig.value.top = 'none'
    } else {
      contextConfig.value.top = event.clientY - top
      contextConfig.value.bottom = 'none'
    }
    if (event.clientX - left > (width * 0.666)) {
      contextConfig.value.right = width - (event.clientX - left)
      contextConfig.value.left = 'none'
    } else {
      contextConfig.value.left = event.clientX - left
      contextConfig.value.right = 'none'
    }
  }

  // 复制
  function copy (curComp: TComp) {
    curCopyComp.value = JSON.parse(JSON.stringify(curComp))
  }

  // 剪切
  function cut (curComp: TComp) {
    curCopyComp.value = JSON.parse(JSON.stringify(curComp))
    if (curComp.parentId) {
      const parent = panelJson.value.children.find(item => item.id === curComp.parentId)!
      const index = parent.children!.findIndex((item: any) => item.id === curComp.id)
      parent.children!.splice(index, 1)
      return
    }
    const index = panelJson.value.children.findIndex(item => item.id === curComp.id)
    panelJson.value.children.splice(index, 1)
  }

  // 置顶
  function topUp (curComp: TComp) {
    if (!panelJson.value.children?.length) return
    const index = panelJson.value.children.findIndex(item => item.id === curComp.id)
    if (index == 0) return
    panelJson.value.children?.unshift(...panelJson.value.children.splice(index, 1) as any)
  }

  // 置底
  function bottomUp (curComp: TComp) {
    if (!panelJson.value.children?.length) return
    const index = panelJson.value.children.findIndex(item => item.id === curComp.id)
    if (index == panelJson.value.children?.length - 1) return
    panelJson.value.children?.push(...panelJson.value.children.splice(index, 1) as any)
  }

  // 上移
  function moveUp (curComp: TComp) {
    if (!panelJson.value.children?.length) return
    const index = panelJson.value.children.findIndex(item => item.id === curComp.id)
    if (index == 0) return
    panelJson.value.children?.splice(index - 1, 0, ...panelJson.value.children.splice(index, 1) as any)
  }

  // 下移
  function moveDown (curComp: TComp) {
    if (!panelJson.value.children?.length) return
    const index = panelJson.value.children.findIndex(item => item.id === curComp.id)
    if (index == panelJson.value.children?.length - 1) return
    panelJson.value.children?.splice(index + 1, 0, ...panelJson.value.children.splice(index, 1) as any)
  }
  
  // 删除
  function compDelete (curComp: TComp) {
    curComp.config.isActive = false
    if (curComp.parentId) {
      const parent = panelJson.value.children.find(item => item.id === curComp.parentId)!
      const index = parent.children!.findIndex((item: any) => item.id === curComp.id)
      parent.children!.splice(index, 1)
      return
    }
    const index = panelJson.value.children.findIndex(item => item.id === curComp.id)
    panelJson.value.children.splice(index, 1)
  }

  return {
    contextConfig,
    showPanelContext,
    curCopyComp,
    showCompContext,
    activeComp,
    paste,
    clear,
    clearClipboard,
    panelClick,
    panelContextMenu,
    compContextHandler,
    copy,
    cut,
    topUp,
    bottomUp,
    moveUp,
    moveDown,
    compDelete
  }
}